<template>
    <div>
        <van-nav-bar title="登录" />
        <van-form @submit="onSubmit" class="form" ref="form">
            <van-field v-model="mobile" name="mobile" placeholder="请输入手机号" :rules="mobilerules">
                <template #label>
                    <span class="toutiao toutiao-shouji"></span>
                </template>
            </van-field>

            <van-field v-model="code" name="code" placeholder="请输入验证码" :rules="coderules">
                <template #label>
                    <span class="toutiao toutiao-yanzhengma"></span>
                </template>
                <template #button>
                    <van-button class="code-btn " type="default" size="small" round native-type="button"
                        @click="getCode" v-if="isCodeBtn">获取验证码</van-button>
                    <van-count-down :time="60*1000" format='ss 秒' v-else @finish='isCodeBtn=true' />
                </template>
            </van-field>
            <div style="margin: 16px;">
                <van-button block type="info" native-type="submit">登录</van-button>
            </div>
        </van-form>
    </div>
</template>

<script>
import { loginAPI, getCodeAPI } from '@/api'
import { mapMutations } from 'vuex'
export default {
    data() {
        const mobilerules = [
            { required: true, message: '请输入手机号', trigger: 'onBlur' },
            {
                pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
                message: '手机号格式非法', trigger: 'onBlur'
            }
        ]
        const coderules = [{ required: true, message: '请输入验证码' },
        {
            pattern: /^[0-9]{6}$/,
            message: '请输入六位数字验证'
        }]

        return {
            mobile: '',
            code: '',
            mobilerules,
            coderules,
            isCodeBtn: true
        }
    },
    methods: {
        ...mapMutations(['SET_TOKEN']),
        async onSubmit() {
            const { mobile, code } = this
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            })
            try {
                const { data } = await loginAPI(mobile, code)
                console.log(data.data)
                this.SET_TOKEN(data.data)
                this.$router.push('/profile')
                this.$toast.success('登录成功')
            } catch (error) {
                if (error.response?.status === 400) {
                    this.$toast.fail(error.response.data.message)
                } else {
                    throw error
                }
            }
        },
        async getCode() {
            await this.$refs.form.validate('mobile')
            this.isCodeBtn = false
            this.$toast.loading({
                message: '发送验证码中....',
                forbidClick: true
            })
            const { data } = await getCodeAPI(this.mobile)
            this.$toast.success('发送验证码成功')
            console.log(data)
        }
    }
}
</script>

<style scoped lang="less">
.van-nav-bar {
    background-color: #3296fa;

    :deep(.van-nav-bar__title) {
        color: #fff;
    }
}

:deep(.form) {
    .toutiao {
        font-size: 40px;
    }

    .van-field__label {
        flex: 1
    }

    .van-field__value {
        flex: 20
    }
}

.code-btn {
    background-color: #eeeeee;
    color: #9a8b7e;
    height: 0.64rem;
}
</style>